<template>
  <div>
    <el-form ref="searchForm"  label-width="20px">

      <div v-if="GLOBAL.global_limit.includes('40')">
        <el-col :span="2" :offset="22">
          <el-button type="primary" size="mini" @click="showAdd">新增用户</el-button>
        </el-col>
      </div>

      <el-dialog title="新增用户" align="left" :visible.sync="dialogFormVisible"   :show-close="false">

      <el-form :model="addInfo" :rules="rules" ref="addInfo" label-width="150px" >
        <el-form-item label="用户姓名" prop="name">
          <el-input v-model="addInfo.name" ></el-input>
        </el-form-item>
        <el-form-item label="登录账号(手机号)" prop="tel">
          <el-input v-model="addInfo.tel" ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addInfo.password" placeholder="请输入密码" :type="passw"  @blur="onBlur">
            <i slot="suffix" :class="icon" @click="showPass"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input v-model="addInfo.password2" placeholder="请再次输入密码" :type="passw2"  @blur="onBlur2">
            <i slot="suffix" :class="icon2" @click="showPass2"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="学校" prop="uid">
          <el-select v-model="addInfo.uid"  placeholder="请选择学校" @change="selectCollege($event)">
            <el-option
              v-for="item in uOptions"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院(全选请只需选择全部一项即可）" prop="cid">
          <el-select v-model="addInfo.cid"  multiple  placeholder="请选择学院" >
            <el-option
              v-for="item in cOptions"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色(权限)" prop="rid">
          <el-select v-model="addInfo.rid"  placeholder="请选择角色">
            <el-option
              v-for="item in rOptions"
              :key="item.id"
              :label="item.label"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div style="margin-top: 100px" slot="footer" class="dialog-footer" align="right">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click=addUser>确 定</el-button>
      </div>
    </el-dialog>

      <el-dialog title="编辑用户" align="left" :visible.sync="dialogFormVisible2" :show-close="false">

        <el-form :model="editInfo" label-width="150px" :rules="rules" ref="editInfo">
          <el-form-item label="用户姓名" prop="name">
            <el-input v-model="editInfo.name" ></el-input>
          </el-form-item>
          <el-form-item label="登录账号(手机号)" prop="tel" >
            <el-input v-model="editInfo.tel" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="editInfo.password" placeholder="请输入密码" :type="passw" clearable @blur="onBlur">
              <i slot="suffix" :class="icon" @click="showPass"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="password2">
            <el-input v-model="editInfo.password2" placeholder="请再次输入密码" :type="passw2"  @blur="onBlur2">
              <i slot="suffix" :class="icon2" @click="showPass2"></i>
            </el-input>
          </el-form-item>
<!--          <el-form-item label="学校" prop="uid" >-->
<!--            <el-select v-model="editInfo.uid"  placeholder="请选择学校" @change="selectCollege($event)" :disabled="true">-->
<!--              <el-option-->
<!--                v-for="item in uOptions"-->
<!--                :key="item.id"-->
<!--                :label="item.label"-->
<!--                :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="学院" prop="cid">-->
<!--            <el-select v-model="editInfo.cid"  placeholder="请选择学院" :disabled="true">-->
<!--              <el-option-->
<!--                v-for="item in cOptions"-->
<!--                :key="item.id"-->
<!--                :label="item.label"-->
<!--                :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="角色(权限)" prop="rid">-->
<!--            <el-select v-model="editInfo.rid"  placeholder="请选择角色" :disabled="true">-->
<!--              <el-option-->
<!--                v-for="item in rOptions"-->
<!--                :key="item.id"-->
<!--                :label="item.label"-->
<!--                :value="item.id">-->
<!--              </el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </el-form>
        <div style="margin-top: 100px" slot="footer" class="dialog-footer" align="right">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click=editUser>确 定</el-button>
        </div>
      </el-dialog>

    </el-form>

    <el-table
      stripe
      :row-style="{height:'45px'}"
      :cell-style="{padding:'0px'}"
      style="font-size: 14px;width: 100%"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      :data= userTable
      >
      <el-table-column
        prop="index"
        align="center"
        label="序号"
        width="100">
      </el-table-column>
      <el-table-column
        align="center"
        prop="userName"
        label="用户姓名"
        width="150"
        :show-overflow-tooltip='true' >
      </el-table-column>
      <el-table-column
        align="center"
        prop="tel"
        label="用户账号"
        width="150"
        :show-overflow-tooltip='true' >
      </el-table-column>
      <el-table-column
        align="center"
        prop="password"
        label="用户密码"
        width="150"
        :show-overflow-tooltip='true' >
      </el-table-column>
      <el-table-column
        align="center"
        label="用户头像"
        width="100">
        <template slot-scope="scope">
          <img :src="scope.row.imageUrl" width="30" height="30"/>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="university"
        label="所属高校"
        width="150"
        :show-overflow-tooltip='true' >
      </el-table-column>
      <el-table-column
        align="center"
        prop="college"
        label="所属学院"
        width="150"
        :show-overflow-tooltip='true' >
      </el-table-column>
      <el-table-column
        align="center"
        prop="role"
        label="用户角色"
        width="150"
        :show-overflow-tooltip='true' >
      </el-table-column>
      <el-table-column  align="center" label="设置">
        <template slot-scope="scope">
          <span v-if="GLOBAL.global_limit.includes('41')">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          </span>
          <span v-if="GLOBAL.global_limit.includes('42')">
            <el-button
              size="mini"
              type="danger"
              @click="Delete( scope.row)">删除</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
    export default {
        name: "User",
        created() {
            this.initData();
        },
        methods:{
            initData() {
                this.$axios.post("managementSystem/user/findAll")
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                this.userTable = data.data.data
                                for (var i in this.userTable) {
                                    this.userTable[i]["index"] = parseInt(i) + 1;
                                }
                            }
                        }
                    })
                this.$axios.post("managementSystem/university/getAllNameByUid")
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                var u = data.data.schoolNameList
                                this.uOptions=[{
                                    "id":-1,
                                    "label":"无"
                                }]
                                for (var i in u) {
                                    this.uOptions.push({"id":u[i]["id"],"label":u[i]["universityName"]})
                                }
                            }
                        }
                    })
                this.$axios.post("managementSystem/role/findAll")
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                var u = data.data.data
                                this.rOptions=[]
                                for (var i in u) {
                                    this.rOptions.push({"id":u[i]["id"],"label":u[i]["name"]+"("+u[i]["universityName"]+")"})
                                }
                            }
                        }
                    })
            },
            //密码的隐藏和显示
            showPass() {
                //点击图标是密码隐藏或显示
                if (this.passw == "text") {
                    this.passw = "password";
                    //更换图标
                    this.icon = "el-input__icon el-icon-view";
                } else {
                    this.passw = "text";
                    this.icon = "el-input__icon el-icon-loading";
                    setTimeout(()=>{
                        this.icon = "";
                    },500)
                }
            },
            //密码的隐藏和显示
            showPass2() {
                //点击图标是密码隐藏或显示
                if (this.passw2 == "text") {
                    this.passw2 = "password";
                    //更换图标
                    this.icon2 = "el-input__icon el-icon-view";
                } else {
                    this.passw2 = "text";
                    this.icon2 = "el-input__icon el-icon-loading";
                    setTimeout(()=>{
                        this.icon2 = "";
                    },500)
                }
            },
            selectCollege(event){
                this.addInfo.cid=null
                console.log(event)
                this.$axios.post("managementSystem/college/findbyUid",{"uid":event})
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                var u = data.data.data
                                this.cOptions=[{
                                    "id":-1,
                                    "label":"全部"
                                }]
                                for (var i in u) {
                                    this.cOptions.push({"id":u[i]["collegeId"],"label":u[i]["collegeName"]})
                                }
                            }
                        }
                    })
            },
            //密码失焦事件
            onBlur(){
                this.passw = "password";
                this.icon = "el-input__icon el-icon-view";
            },
            onBlur2(){
                this.passw2 = "password";
                this.icon2 = "el-input__icon el-icon-view";
            },
            addUser(){
                this.$refs.addInfo.validate((valid) => {if (valid) {
                    var colleges=""
                    for(var item in this.addInfo["cid"]){
                        colleges+=","+this.addInfo["cid"][item]
                    }
                    colleges=colleges.substring(1,colleges.length)
                    console.log(colleges)
                    this.addInfo["cid"]=colleges
                    for (var key in this.addInfo) {
                        console.log("属性：" + key + ",值：" + this.addInfo[key]+ ",类型："+typeof(this.addInfo[key]) );
                    }
                    this.$axios.post("managementSystem/user/insert",this.addInfo)
                        .then(data => {
                            if (data.status != 200) {
                                this.$message.error('服务出错' + data.status);
                            } else {
                                if (data.data.errorCode == '200') {
                                    this.$message({
                                        message: '插入成功',
                                        type: 'success'
                                    });
                                }else{
                                    this.$message.error('插入失败');
                                }
                                this.initData()
                            }
                        });
                    this.dialogFormVisible = false
                  }
               })
            },
            editUser(){
                this.$refs.editInfo.validate((valid) => {if (valid) {
                    for (var key in this.editInfo) {
                        console.log("属性：" + key + ",值：" + this.editInfo[key]);
                    }
                    this.$axios.post("managementSystem/user/edit",this.editInfo)
                        .then(data => {
                            if (data.status != 200) {
                                this.$message.error('服务出错' + data.status);
                            } else {
                                if (data.data.errorCode == '200') {
                                    this.$message({
                                        message: '编辑成功',
                                        type: 'success'
                                    });
                                }else{
                                    this.$message.error('编辑失败');
                                }
                                this.initData()
                            }
                        });
                    this.dialogFormVisible2 = false
                  }
                })
            },
            handleEdit(row) {  //进入编辑表单
                // this.selectCollege(row.universityId)
                this.editInfo.id = row.id
                this.editInfo.name = row.userName
                this.editInfo.tel = row.tel
                this.editInfo.password = row.password
                this.editInfo.password2 = ""
                // this.editInfo.uid = row.universityId
                // this.editInfo.cid = row.collegeId
                // this.editInfo.rid = row.userType
                this.dialogFormVisible2 = true
                this.passw="password"
                this.icon = "el-input__icon el-icon-view";
            },
            Delete(row){
                this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'danger',
                    center: true
                }).then(() => {
                    this.$axios.post("managementSystem/user/delete", {"id": row.id})
                        .then(data => {
                            if (data.status != 200) {
                                this.$message.error('服务出错' + data.status);
                            } else {
                                if (data.data.errorCode == '200') {
                                    this.$message({
                                        message: '删除成功',
                                        type: 'success'
                                    });
                                } else {
                                    this.$message.error('删除失败');
                                }
                                this.initData()
                            }
                        });
                })
            },
            showAdd(){
                this.dialogFormVisible = true;
                this.addInfo.name = ""
                this.addInfo.tel = ""
                this.addInfo.password = ""
                this.addInfo.password2 = ""
                this.addInfo.uid = null
                this.addInfo.cid = null
                this.addInfo.rid = null
                this.passw="password"
                this.icon = "el-input__icon el-icon-view";
            },

        },
        data() {
            // 密码验证
            var pwdCheck = async(rule, value, callback) => {
                if (value.length < 1){
                    return callback(new Error('密码不能为空！'));
                }else{
                    callback()
                }
            }
            // 重复密码验证
            var pwdAgainCheck = async(rule, value, callback) => {
                if (value.length < 1) {
                    return callback(new Error('重复密码不能为空！'));
                } else if(this.dialogFormVisible == true){
                    if(this.addInfo.password != this.addInfo.password2) {
                        return callback(new Error('两次输入密码不一致！'));
                    }
                } else {
                    if(this.editInfo.password != this.editInfo.password2) {
                        return callback(new Error('两次输入密码不一致！'));
                    }
                }
                callback()
            }
            return {

                userTable:[{"id":1,"userName":"lgg","tel":"11111","password":"123456","universityId":1,"userType":2,"imageUrl":"https://follwup.cmas2020.cn/img/diaryImg/1608689964159-tmp_05359ec4032c588ac2c397854ff6ce60e4ceab585b864509.jpg"},
                    {"id":1,"userName":"lgg","tel":"11111","password":"123456","universityId":1,"userType":2,"imageUrl":"https://follwup.cmas2020.cn/img/diaryImg/1608689964159-tmp_05359ec4032c588ac2c397854ff6ce60e4ceab585b864509.jpg"},
                    {"id":1,"userName":"lgg","tel":"11111","password":"123456","universityId":1,"userType":2,"imageUrl":"https://follwup.cmas2020.cn/img/diaryImg/1608689964159-tmp_05359ec4032c588ac2c397854ff6ce60e4ceab585b864509.jpg"},
                    {"id":1,"userName":"lgg","tel":"11111","password":"123456","universityId":1,"userType":2,"imageUrl":"https://follwup.cmas2020.cn/img/diaryImg/1608689964159-tmp_05359ec4032c588ac2c397854ff6ce60e4ceab585b864509.jpg"}],
                addInfo:{
                    name:"",
                    tel:"",
                    password:"",
                    password2:"",
                    uid:null,
                    cid:null,
                    rid:null,
                },
                editInfo:{
                    id:-1,
                    name:"",
                    tel:"",
                    password:"",
                    password2:"",
                    // uid:null,
                    // cid:null,
                    // rid:null,
                },
                rules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    tel: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    password: [
                        { required: true,  validator: pwdCheck, trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    password2: [
                        { required: true,  validator: pwdAgainCheck, trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    uid: [
                        { required: true, message: '请选择学校', trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    cid: [
                        { required: true, message: '请选择学院', trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    rid: [
                        { required: true, message: '请选择角色', trigger: 'blur' },
                        //{ validator: validaePass2 }
                    ]
                },
                icon: "el-input__icon el-icon-view",
                icon2: "el-input__icon el-icon-view",
                passw: "password",
                passw2: "password",
                dialogFormVisible:false,
                dialogFormVisible2:false,
                uOptions:[{
                    "id":-1,
                    "label":"无"
                },{
                    "id":1,
                    "label":"华中科技大学"
                },{
                    "id":2,
                    "label":"武汉大学"
                }],
                rOptions:[{
                    "id":1,
                    "label":"超级管理员"
                },{
                    "id":2,
                    "label":"学校管理人员"
                }],
                cOptions:[]
            };
        }
    }
</script>

<style scoped>

</style>
